<!-- 逻辑 -->
<script setup lang="ts">
import { ref } from 'vue';

// 1. 定义基本类型
const num = ref(10)
// script部分如果要修改数据, 需要通过.value
const changeNum = () => {
  num.value++
}

// 2.定义复杂类型
const foods = ref(['西兰花', '猪脚饭', '黄焖鸡米饭'])
const changeFoods = () => {
  foods.value.push('酱香饼')
}

// ref 好像比 reactive 强大一点
</script>

<!-- 结构 -->
<template>
<h1 @click="changeNum">num: {{ num }}</h1>
<h1 @click="changeFoods">foods: {{ foods }}</h1>
<button @click="foods.unshift('花菜')">修改数据</button>
</template>

<!-- 样式 -->
<style scoped>

</style>